<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 五、新的组件
		 
		 ## 1.Fragment
		 - 在Vue2中: 组件必须有一个根标签
		 - 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
		 - 好处: 减少标签层级, 减小内存占用
		 
		 ## 2.Teleport
		 
		 - 什么是Teleport？—— `Teleport` 是一种能够将我们的组件html结构移动到指定位置的技术。
		 
		   ```vue
		   <teleport to="移动位置"> 
		   	<div v-if="isShow" class="mask">
		   		<div class="dialog">
		   			<h3>我是一个弹窗</h3>
		   			<button @click="isShow = false">关闭弹窗</button>
		   		</div>
		   	</div>
		   </teleport>
		   ```
		   to 里面 必须是有效的查询选择器或HTMLElement


		 ## 3.Suspense

		   正常的组件渲染 需要父子组件全部渲染 才会显示
		 - 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
		 
		 
		 - 使用步骤：
		 
		   - 异步引入组件
		 
		     ```js
		     import {defineAsyncComponent} from 'vue'
		     const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
		     ```
		 
		   - 使用```Suspense```包裹组件，并配置好```default``` 与 ```fallback```
		 
		     ```vue
		     <template>
		     	<div class="app">
		     		<h3>我是App组件</h3>
		     		<Suspense>
		     			<template v-slot:default>
		     				<Child/>
		     			</template>
		     			<template v-slot:fallback>
		     				<h3>加载中.....</h3>
		     			</template>
		     		</Suspense>
		     	</div>
		     </template>
				 
				 更多的用在 子组件 数据正在 加载中....
		     ```
		 
		 # 六、其他
		 
		 ## 1.全局API的转移
		 
		 - Vue 2.x 有许多全局 API 和配置。
		   - 例如：注册全局组件、注册全局指令等。
		 
		     ```js
		     //注册全局组件
		     Vue.component('MyButton', {
		       data: () => ({
		         count: 0
		       }),
		       template: '<button @click="count++">Clicked {{ count }} times.</button>'
		     })
		     
		     //注册全局指令
		     Vue.directive('focus', {
		       inserted: el => el.focus()
		     }
		     ```
		 
		 - Vue3.0中对这些API做出了调整：
		 
		   - 将全局的API，即：```Vue.xxx```调整到应用实例（```app```）上
		 
		     | 2.x 全局 API（```Vue```） | 3.x 实例 API (`app`)                        |
		     | ------------------------- | ------------------------------------------- |
		     | Vue.config.xxxx           | app.config.xxxx                             |(全局配置)
		     | Vue.config.productionTip  | 移除</strong> |      					    |(Vue.config.productionTip 关闭vue生产提示)
		     | Vue.component             | app.component                               |(全局组件)
		     | Vue.directive             | app.directive                               |(自定义指令)
		     | Vue.mixin                 | app.mixin                                   |
		     | Vue.use                   | app.use                                     |
		     | Vue.prototype             | app.config.globalProperties                 |(全局使用)
			 
			 app.config.globalProperties.msg = 'hello'
			 在选项式api中
			export default {
				mounted() {
					console.log(this.msg) // 'hello'
				}
			}
			在组合式api中
			onMounted(() => {
				// 通过getCurrentInstance().appContext访问全局属性
				const { msg } = getCurrentInstance().appContext.config.globalProperties
				console.log('msg', msg)
			})
		 
		 ## 2.其他改变
		 
		 - data选项应始终被声明为一个函数。
		 
		 - 过度类名的更改：
		 
		   - Vue2.x写法
		 
		     ```css
		     .v-enter,
		     .v-leave-to {
		       opacity: 0;
		     }
		     .v-leave,
		     .v-enter-to {
		       opacity: 1;
		     }
		     ```
		 
		   - Vue3.x写法
		 
		     ```css
		     .v-enter-from,
		     .v-leave-to {
		       opacity: 0;
		     }
		     
		     .v-leave-from,
		     .v-enter-to {
		       opacity: 1;
		     }
		     ```
		 
		 - 移除keyCode作为 v-on 的修饰符 @keyCode.13
					keyCode兼容性差
		 - 移除```v-on.native```修饰符
				
				
				
		   - 父组件中绑定事件
		 
		     ```vue
		     <my-component
		       v-on:close="handleComponentEvent"
		       v-on:click="handleNativeClickEvent"
		     />
		     ```
		   - 子组件中声明自定义事件
		 
		     ```vue
		     <script>
		       export default {
		         emits: ['close']
		       }
		     </script>
		     ```
		 
		 - 移除过滤器（filter）
		 
		   > 过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，
			 这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。
		 
		 - ......
		 
		 -->
	</body>
</html>